<template>
  <div class="management-layout">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">{{ title }}</h1>
      <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
      <el-button 
        type="primary" 
        :icon="ArrowLeft" 
        @click="goBack"
        class="back-button"
      >
        返回聊天
      </el-button>
    </div>

    <!-- 内容区域 -->
    <slot />
  </div>
</template>

<script setup>
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  }
})

const router = useRouter()

const goBack = () => {
  router.push('/chat')
}
</script>

<style scoped>
.management-layout {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  //background-image: url('/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #D4AF37, #FFD700);
  border: none;
  color: #2C1810;
  font-weight: 600;
}

.page-title {
  color: #FFD700;
  font-family: var(--font-magic-title);
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 15px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.page-subtitle {
  color: #FFFFFF;
  font-family: var(--font-magic-body);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  text-align: center;
}
</style>
